<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
   <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery2.1.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>

    <style>
        /*修改弹窗宽度*/

        .modal-dialog {
            width: 1000px!important;
        }
    </style>


</head>
<body>


<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" onclick="fun3()">
    开始演示模态框
</button>




<!-- 图片预览模态框（Modal）        style="overflow-y: auto"  至关重要  模态框关闭时 会将所有的模态框的 滚动条清除  不想要清楚的主动加上滚动条  原理参考 img.png-->
<div class="modal fade" id="tuPianYuLan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y: auto">
    <div class="modal-dialog"  style="width: 1500px;" >
        <div class="modal-content" >
            <div class="modal-header">

                <button type="button" class="close"  aria-hidden="true" onclick="fun4()">
                    &times;
                </button>

                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>

            </div>
            <div class="modal-body" >
                在这里添加一些文本




                <!-- 按钮触发模态框 -->
                <button class="btn btn-primary btn-lg"    onclick="fun()">
                    框中框
                </button>

                <div style="height: 2000px;background-color:red;">

                </div>





            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"   onclick="fun4()">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



<!-- 图片预览模态框（Modal） -->
<div class="modal fade" id="tuPianYuLan2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog"  style="margin-top: 200px" >
        <div class="modal-content" >
            <div class="modal-header">

                <button type="button" class="close"  aria-hidden="true" onclick="fun2()">
                    &times;
                </button>

                <h4 class="modal-title" id="myModalLabel2">
                    模态框（Modal）标题
                </h4>

            </div>
            <div class="modal-body">
                在这里添加一些文本

                <div style="height: 2000px">

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="" onclick="fun2()">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script>

    /*通过 data-dismiss="modal"  属性可以关闭 modal弹窗  但是如果同事有两个 modal 弹窗 会都关闭  所以可以用下面的方法进行关闭*/

  /*  function fun(){
      $('#tuPianYuLan').modal('hide')
    }*/


    function fun2(){



        $('#tuPianYuLan2').modal('hide')
 //       $('#tuPianYuLan').modal('show')

        $('#tuPianYuLan').show()   //jquery 的显示方法   不带出现的特效

        /*关闭最上面的弹窗  可能会影响下面弹窗的滚动条效果  添加下面的代码 恢复 */
      /*  setTimeout(function (){
            $('body').addClass('modal-open')
        },700)*/
    }



    //$("#add_modal2").modal("toggle");// bootstrap  modal插件，状态反转，关闭则显示，显示则关闭


    function fun(){
        $('#tuPianYuLan2').modal('show')

      //  $('#tuPianYuLan').modal('hide')


          $('#tuPianYuLan').hide()

    }

    function fun3(){
        $('#tuPianYuLan').modal('show')
    }



    function fun4(){
        $('#tuPianYuLan').modal('hide')
    }

</script>

</body>
</html>